<template>
  <div id="dict">
      <headerNav :menu="showMenu" :menuList="login.pageList"></headerNav>
      <header>
        <p>当前模块：字典管理  当前登录人：{{login.name}}  登录时间：{{login.loginTime | timeFormat}}</p>
        <div>
        <el-button size="mini" type="primary" @click="$router.push('login')" icon="el-icon-delete">退出</el-button>
        <el-button size="mini" type="primary" @click="reflash()" icon="el-icon-refresh">刷新</el-button>
        </div>
      </header>
      <div class="wrap">
        <h2>
          请在此处维护字典
        </h2>
        <div class="dict-content">
            <el-form :model="dictForm" :rules="rules" ref="dictForm" label-width="220px">
                <el-form-item v-for="(val, key) in dictForm" :label="val.label" :key="key" :inline="true">

                    <component :style="{width:'232px'}" v-if="val.component !== 'el-select'" v-bind:is="renderDictComponent(val.component)" v-model="dictForm[key].value" v-bind="val.attrs">
                        <i class="el-icon-plus"></i>
                    </component>

                    <component :style="{width:'232px'}" v-if="val.component === 'el-select'" v-bind:is="renderDictComponent(val.component)" v-model="dictForm[key].value" v-bind="val.attrs">
                        <el-option
                            v-for="item in val.attrs.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </component>
                    <el-button size="mini" icon="el-icon-delete" type="danger"  @click="deleteDict(key)">删除字典</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btns">
            <el-button :style="{'margin-left':'30px'}" size="mini" type="primary" @click="addDict" icon="el-icon-plus">添加一个字典</el-button>
            <el-button size="mini" type="primary" @click="submitDict">提交字典</el-button>
        </div>
      </div>

      <el-dialog title="新增字典" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="字段英文名" :label-width="formLabelWidth" >
                <el-input v-model="form.key" placeholder="corporateName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="字段中文名" :label-width="formLabelWidth">
                <el-input v-model="form.label" autocomplete="off" placeholder="格式：公司名称(corporateName)"></el-input>
            </el-form-item>
            <el-form-item label="组件类型" :label-width="formLabelWidth">
                <el-select v-model="form.component" placeholder="请选择组件类型" @change="dialogChange">
                    <el-option label="input组件" value="el-input"></el-option>
                    <el-option label="日期组件" value="el-date-picker"></el-option>
                    <el-option label="select组件" value="el-select"></el-option>
                    <el-option label="上传组件" value="el-upload"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="组件参数设置" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="form.attrs" autocomplete="off" placeholder="格式：{a:1,b:1}"></el-input>
            </el-form-item>
            <el-form-item label="效果预览" :label-width="formLabelWidth">
                <component v-if="form.component !== 'el-select'" v-bind:is="renderDictComponent(form.component)" v-model="form.value" v-bind="dialogAttrs()">
                    <i class="el-icon-plus"></i>
                </component>
                 <component v-if="form.component === 'el-select'" v-bind:is="renderDictComponent(form.component)" v-model="form.value" v-bind="dialogAttrs()">
                    <el-option
                        v-for="item in getOptions(form.attrs)"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </component>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogSubmit()">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
  import {timeFormat} from '../../assets/time.js'
  import headerNav from '../header.vue'
  export default {
    components: {headerNav},
    name: 'tmpl',
    data () {
      return {
        showMenu: true,
        dialogFormVisible: false,
        formLabelWidth: '120px',
        login: {
          name: '',
          loginTime: ''
        },
        // 字典form
        dictForm: {
  
        },
        // 弹窗form
        form: {
          key: '',
          label: '',
          value: '',
          component: 'el-input',
          attrs: '{}'
        },
        // 校验规则
        rules: {

        }
      }
    },
    filters: {
      timeFormat: function (val) {
        return val ? timeFormat(val, 'yyyy-MM-dd hh:mm:ss') : ''
      }
    },
    mounted: function () {
      this.getLoginMess()
      this.getFileds()
    },
    computed: {
      renderDictComponent: function () {
        return function (key) {
          return key
        }
      }
    },
    methods: {
      deleteDict (key) {
        try {
          this.$delete(this.dictForm, key)
        } catch (error) {
          this.$message.error('删除失败！')
        }
      },
      getOptions (str) {
        let attrs = {}
        try {
          attrs = JSON.parse(str)
        } catch (error) {
  
        }
        return attrs.options || []
      },
      dialogAttrs () {
        let attrs = {}
        try {
          attrs = JSON.parse(this.form.attrs)
          delete attrs.options
        } catch (error) {
  
        }
        return attrs
      },
      dialogChange () {
        this.form.component === 'el-upload'
          ? this.form.attrs = '{"action":"http://localhost:9081/upload","list-type":"picture-card"}'
          : this.form.component === 'el-select'
            ? (this.form.attrs = '{"options":[{"value":"选项1","label":"黄金糕"}]}', this.form.value = '')
            : (this.form.attrs = '{}', this.form.value = '')
      },
      dialogSubmit () {
        let forms = Object.assign({}, this.form)
        if (!forms.key) {
          this.$message.error('还未设置字段名！')
        } else {
          if (this.dictForm[forms.key]) {
            this.$message.error('您已设置过此字典！')
          } else {
            try {
              this.dictForm[forms.key] = {
                'label': forms.label,
                'component': forms.component,
                'verification': null,
                'attrs': JSON.parse(forms.attrs),
                'value': forms.value
              }
              this.dialogFormVisible = false
            } catch (error) {
              this.$message.error('参数设置失败，请检查参数设置！')
            }
          }
        }
  },
      submitDict () {
        this.$http.post('http://localhost:9081/submitDict', {data: this.dictForm}).then((res) => {
          if (res.status === 200 && res.data.code === 'ok') {
            this.$message.success(`${res.data.msg}`)
          } else {
            this.$message.error(`${res.data.msg}`)
          }
        })
      },
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      reflash () {
        location.reload()
      },
      // 添加一个字典
      addDict () {
        this.dialogFormVisible = true
      },
      getLoginMess () {
        this.$http.get('http://localhost:9081/getLoginMess').then((res) => {
          if (res.status === 200 && res.data.code === 'ok') {
            this.login = Object.assign(res.data.data)
          } else {
            this.$message.error(`${res.data.msg}`)
          }
        })
      },
      // 获取字段
      getFileds () {
        this.$http.get('http://localhost:9081/getFileds').then((res) => {
          if (res.status === 200 && res.data.code === 'ok') {
            this.dictForm = Object.assign(res.data.data)
          } else {
            this.$message.error(`${res.data.msg}`)
          }
        })
      }
    }
}
</script>
<style scoped  lang="less">
    #dict{
      header{
        width:100%;
        height:40px;
        background: #fff;
        border:1px solid #ccc;
        box-shadow: 0 1px rgba(0,0,0,.2);
        display: flex;
        font-size:16px;
        padding:4px 8px;
        align-items: center;
        justify-content: flex-end;
        p{
          padding-right:16px;
        }
      }

      .wrap{
        margin-top:8px;
        padding:16px;
        background: #fff;
        h2{
          font-size:16px;
          line-height:32px;
          margin-bottom: 16px;
        }
        .dict-content{
            width:600px;
        }
      }
    }
</style>